import React, { useState } from 'react'

export default function Book() {
    const [books, setBooks] = useState(() => {
        return [
            {
                isbn: '1222002020202020020202',
                bookName: '精通javascript',
                author: '张三',
                press: '人民邮电出版社',
                price: 89.5,
                state: 0
            },
            {
                isbn: '3222002020202020020202',
                bookName: '精通vue2',
                author: '李四',
                press: '清华大学出版社',
                price: 69.5,
                state: 1
            }
        ]
    })

    const operator=(isbn)=>{
        for(let i=0;i<books.length;i++){
            if(books[i].isbn===isbn){
               if(books[i].state===0){
                 books[i].state=1
               }else if(books[i].state===1){
                 books[i].state=0
               }
            }
        }
        
        console.log('更新后的数据',books);
        //深拷贝
        let books1=JSON.parse(JSON.stringify(books))
        //需要使用setBooks将数据进行更新
        //setBooks的参数是一个更改以后的对象
        setBooks(books1)
        
    }
    return (
        <div>
            <h1>图书列表</h1>
            <table>
                <thead>
                    <tr>
                        <td>ISBN</td>
                        <td>书名</td>
                        <td>作者</td>
                        <td>价格</td>
                        <td>出版社</td>
                        <td>状态</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    {
                    
                        books.map((item, index) => <tr key={item.isbn}>
                            <td>{item.isbn}</td>
                            <td>{item.bookName}</td>
                            <td>{item.author}</td>
                            <td>{item.price}</td>
                            <td>{item.press}</td>
                            <td>{item.state===0?"可借":"已借"}</td>
                            <td>
                                <button onClick={()=>{operator(item.isbn)}}>{item.state===0?"借出":"归还"}</button>
                            </td>
                        </tr>)
                    }
                </tbody>
            </table>
        </div>
    )
}
